import { useMemo } from 'react'

function useGrid(chart) {
  const { enabled, position } = chart?.legend || {}
  const { dataZoomEnabled } = chart
  const grid = useMemo(() => {
    if (!enabled && !dataZoomEnabled) {
      return {
        left: 4,
        top: 12,
        right: 4,
        bottom: 16
      }
    }
    if (enabled) {
      const left = position === 'left' ? 120 : 4
      const top = position === 'top' ? 32 : 12
      const right = position === 'right' ? 120 : 4
      let bottom = position === 'bottom' ? 40 : 16
      if (!dataZoomEnabled) {
        return { left, top, right, bottom }
      }
      bottom = bottom + 40
      return { left, top, right, bottom }
    }
    if (dataZoomEnabled) {
      return {
        left: 4,
        top: 12,
        right: 4,
        bottom: 40
      }
    }
  }, [chart])

  return grid
}

export default useGrid
